<template>
  <div class="app-container">
    <div style="width: 70%; margin: 0 auto">
      <el-steps :active="1" simple finish-status="success" class="mb-20">
        <el-step title="招标"></el-step>
        <el-step title="投标"></el-step>
        <el-step title="开标"></el-step>
        <el-step title="评标"></el-step>
        <el-step title="定标"></el-step>
        <el-step title="公示"></el-step>
      </el-steps>
      <el-card shadow="never" class="mb-20" :body-style="{ padding: 0 }">
        <div slot="header" class="clearfix">
          <span>项目基础信息</span>
          <el-button type="primary" plain class="float-right"
            >澄清/答疑
          </el-button>
        </div>
        <el-form :model="form" label-width="100px">
          <el-row :gutter="12">
            <el-col :md="12">
              <el-form-item label="招标名称">{{ form.title }}</el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="招标编号">{{ form.code }}</el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="采购单位">{{ form.company }}</el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="招标方式">{{ form.way }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card shadow="never" class="mb-20">
        <div slot="header" class="clearfix">
          <span>物料明细</span>
          <el-button type="primary" class="float-right" plain
            >导出物料明细
          </el-button>
        </div>
        <el-table :data="lists" highlight-current-row>
          <el-table-column
            label="序号"
            type="index"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column
            label="物料编码"
            prop="code"
            width="120"
          ></el-table-column>
          <el-table-column
            label="物料名称"
            prop="name"
            width="160"
          ></el-table-column>
          <el-table-column
            label="规格型号"
            prop="model"
            width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="数量" prop="num"></el-table-column>
          <el-table-column
            label="计量单位"
            prop="unit"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column label="使用厂区" prop="use"></el-table-column>
          <el-table-column label="联系人" prop="contract"></el-table-column>
          <el-table-column label="联系电话" prop="mobile"></el-table-column>
          <el-table-column
            label="采购方备注"
            prop="remark"
            width="120"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
      </el-card>
      <el-card shadow="never" class="mb-20">
        <div slot="header" class="clearfix">
          <span>联系人信息</span>
          <el-button
            type="primary"
            class="float-right"
            plain
            style="width: 100px"
            >修改
          </el-button>
        </div>
        <el-row :gutter="12">
          <el-form label-width="120px">
            <el-col :md="12">
              <el-form-item label="联系人：">张三</el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="联系电话：">18596369966</el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="备用联系人：">张四</el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="备用联系电话：">13318996585</el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-card>
      <div class="text-center">
        <el-button
          type="primary"
          @click="dialogVisible = true"
          style="width: 100px"
          >提交审核
        </el-button>
        <el-button>关闭</el-button>
      </div>
    </div>

    <el-dialog title="提交审核" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="招标编号"> XJD-998376241</el-form-item>
        <el-form-item label="招标标题"> 招标名称</el-form-item>
        <el-form-item label="选择审批流">
          <el-select>
            <el-option label="无审批流"></el-option>
            <el-option label="一级审批流"></el-option>
            <el-option label="二级审批流"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: "招标名称",
        code: "XJD-998376241",
        company: "叮当（天津）电子商务有限公司",
        way: "公开招标",
      },
      lists: [
        {
          code: "01080010",
          name: "卡套式端直通管接头",
          model: "规格：φ160*6500；覆膜克重：550",
          num: 100,
          unit: "条",
          use: "工厂1部",
          contract: "联系人",
          mobile: "18665427894",
          remark: "要大一号的，小的不能用",
        },
        {
          code: "01080010",
          name: "卡套式端直通管接头",
          model: "规格：φ160*6500；覆膜克重：550",
          num: 100,
          unit: "条",
          use: "工厂1部",
          contract: "联系人",
          mobile: "18665427894",
          remark: "要大一号的，小的不能用",
        },
        {
          code: "01080010",
          name: "卡套式端直通管接头",
          model: "规格：φ160*6500；覆膜克重：550",
          num: 100,
          unit: "条",
          use: "工厂1部",
          contract: "联系人",
          mobile: "18665427894",
          remark: "要大一号的，小的不能用",
        },
        {
          code: "01080010",
          name: "卡套式端直通管接头",
          model: "规格：φ160*6500；覆膜克重：550",
          num: 100,
          unit: "条",
          use: "工厂1部",
          contract: "联系人",
          mobile: "18665427894",
          remark: "要大一号的，小的不能用",
        },
        {
          code: "01080010",
          name: "卡套式端直通管接头",
          model: "规格：φ160*6500；覆膜克重：550",
          num: 100,
          unit: "条",
          use: "工厂1部",
          contract: "联系人",
          mobile: "18665427894",
          remark: "要大一号的，小的不能用",
        },
      ],
      dialogVisible: false,
    };
  },
  methods: {
    handleSubmit() {
      this.$message.success("提交成功！");
      this.$router.push({
        name: "BiddingIndex",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.header-con {
  border-bottom: 1px dashed #ccc;
  padding: 5px;
  margin-bottom: 10px;
}
</style>
